<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="sub">是兄弟就别砍我</button>
  </div>
</template>

<script>
export default {
  //props:['传过来的属性名1'，...]
  //子组件收到数据后，想怎么用就怎么用，和data一样
  props: ['title', 'price', 'info','id'],
  methods:{
    sub(){
      //触发父组件给我们绑定的事件
      //事件名：kan
      //使用this.$emit(事件名，数据)
      this.$emit('kan',this.id)
    }
  }
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style scoped>